'use client';

import Link from "next/link";
import Logo from "@/components/logo/Logo";

interface NavBarProps {
  active?: "home" | "discover" | "products" | "cases";
}

export default function NavBar({ active = "home" }: NavBarProps) {
  const navLinks = [
    { href: "/", label: "首页", key: "home" },
    { href: "/discover", label: "发现", key: "discover" },
    { href: "/products", label: "产品", key: "products" },
    { href: "/cases", label: "攻略", key: "cases" },
  ];

  return (
    <nav className="bg-white/90 backdrop-blur-lg shadow-sm sticky top-0 z-50">
      <div className="container mx-auto max-w-6xl px-4 py-3 flex items-center justify-between">
        {/* 左侧Logo */}
        <div className="flex-shrink-0">
          <Logo />
        </div>

        {/* 中间导航菜单 - PC端 */}
        <div className="flex-1 flex justify-center">
          <div className="hidden md:flex items-center gap-8">
            {navLinks.map(link => (
              <Link
                key={link.key}
                href={link.href}
                className={`px-3 py-1 text-xl font-medium rounded-none border-b-2 transition-colors duration-200 whitespace-nowrap select-none ${active === link.key ? "text-blue-600 border-blue-600" : "text-slate-700 border-transparent hover:text-blue-600 hover:border-blue-200"}`}
              >
                {link.label}
              </Link>
            ))}
          </div>
        </div>

        {/* 右侧区域 */}
        <div className="flex-shrink-0 flex items-center gap-2">
          {/* 移动端菜单按钮 - 已移除，使用底部导航 */}
        </div>
      </div>

      {/* 移动端下拉菜单 - 已移除，使用底部导航 */}
    </nav>
  );
} 